<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/1/28
  Time: 10:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>费用报销</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/js/jquery-3.4.1.js"></script>
<body style="padding: 10px;background-color: rgb(236,240,245);">
    <h1 style="margin-bottom: 20px;">费用报销</h1>
    <input id="dept_id" value="${user.dept_id}" style="display: none">
    <input id="dept_name" value="${user.dept_name}" style="display: none">
    <!-- 表单区+返回按钮 -->
    <div style="background-color: white;">
        <div class="layui-row">
            <!-- 返回按钮 -->
            <div class="layui-col-xs1" style="padding-left: 10px;padding-top: 10px;">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="history.go(-1)">
                    <i class="layui-icon layui-icon-left">返回</i>
                </button>
            </div>
        </div>
        <!-- 蓝色分割线 -->
        <hr class="layui-bg-blue">
        <h1 style="text-align: center;margin-bottom: 50px;">费用报销单</h1>
        <form class="layui-form layui-form-pane" action="/newProcess/addProcess.do" style="padding-left: 110px;">
            <input name="process_type" value="burse" style="display: none">
            <!-- 第一排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input name="process_title" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">紧急程度</label>
                    <div class="layui-input-block">
                        <select name="process_status_id" lay-verify="required">
                            <option value=""></option>
                            <c:forEach var="item" items="${process_status}">
                                <option value="${item.status_id}">${item.status_name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>
            <!-- 第二排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">申请人</label>
                    <div class="layui-input-block">
                        <input readonly="readonly" class="layui-input" value="${user.real_name}">
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">证明人</label>
                    <div class="layui-input-block">
                        <input id="prove_user_id" name="prove_user_id" style="display: none">
                        <input id="prove_user_name" required readonly lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                        <button type="button" class="layui-btn layui-btn-xs" onclick="openUser()" style="position: absolute;top: 8px;right: 10px">添加</button>
                    </div>
                </div>
            </div>
            <!-- 第三排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">相关客户</label>
                    <div class="layui-input-block">
                        <input name="customer" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%">
                    <label class="layui-form-label">报销方式</label>
                    <div class="layui-input-block">
                        <select name="payment">
                            <option value=""></option>
                            <c:forEach var="item" items="${payment}">
                                <option value="${item.dictionary_fieldValue}">${item.dictionary_value}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>
            <!-- 第四排 -->
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label">描述</label>
                    <textarea name="burse_desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
                <div class="layui-inline" style="width: 45%;margin-top: -100px;">
                    <label class="layui-form-label">审核人员</label>
                    <div class="layui-input-block">
                        <input name="auditUser_id" class="layui-input" value="${user.manager_id}" style="display: none">
                        <input readonly="readonly" class="layui-input" value="${user.manager_name}">
                    </div>
                </div>
            </div>
            <!-- 第五排 -->
            <div class="layui-form-item">
                <div>
                    <h4 style="float: left;">报销明细</h4>
                    <div style="float: right;margin-right: 90px;">
                        <button type="button" onclick="addBurseDetails()"><i class="layui-icon layui-icon-addition"></i></button>
                        <button type="button" onclick="removeSeleced()"><i class="layui-icon layui-icon-subtraction"></i></button>
                    </div>
                </div>
                <!-- 报销明细表格 -->
                <table id="tb" class="layui-table" style="width: 90%;">
                    <thead>
                    <tr>
                        <th>选择</th>
                        <th>费用日期</th>
                        <th>费用科目</th>
                        <th>费用说明</th>
                        <th width="15%">票据张数</th>
                        <th width="15%">报销金额</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr id="row1">
                        <td><input name="burseDetail" value="1" class="chk" type="checkbox" lay-ignore></td>
                        <td><input name="burse_time_1" class="layui-input" id="test1"></td>
                        <td>
                            <select name='subject_id_1'>
                                <option value="">请选择</option>
                                <!--  循环父节点 -->
                                <c:forEach var='parentNode' items='${subject}'>
                                    <c:if test='${parentNode.parent_id == 0}'>
                                        <optgroup label='${parentNode.subject_name}'>
                                            <c:forEach var='childNode' items='${subject}'>
                                                <!--  循环子节点 -->
                                                <c:if test='${childNode.parent_id == parentNode.subject_id}'>
                                                    <option value='${childNode.subject_id}'>${childNode.subject_name}</option>
                                                </c:if>
                                            </c:forEach>
                                        </optgroup>
                                    </c:if>
                                </c:forEach>
                            </select>
                        </td>
                        <td><input name="burse_reason_1" autocomplete="off" class="layui-input"></td>
                        <td><input name="burse_invoices_1" autocomplete="off" class="layui-input"></td>
                        <td><input name="burse_money_1" autocomplete="off" class="layui-input"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!-- 功能按钮 -->
            <div class="layui-form-item" style="padding: 15px 0;text-align: center;">
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="submitBtn">保存</button>
                    <button type="button" class="layui-btn layui-btn-primary" onclick="location.href='/jsp/processManage/burse/applyBurse.jsp'">重置</button>
                </div>
            </div>
        </form>
    </div>
</body>
<script>
    //全局变量：报销明细表行数，默认1行
    var rows = 1;
    //form模块
    layui.use(['form','laydate'], function(){
        var form = layui.form;
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1' ,//指定元素
            value: new Date(),//初始值
            type: 'datetime'
        });
        //监听提交
        form.on('submit(submitBtn)', function(data){
            return true;
        });
    });

    /**
     * 给报销明细表，增加一行
     */
    function addBurseDetails(){
        rows += 1;
        $("#tb").append("<tr id='row"+rows+"'>"
            +"<td><input name='burseDetail' class='chk' type='checkbox' style='display:block' value='"+rows+"' lay-ignore/></td>"
            +"<td><input name='burse_time_"+rows+"' class='layui-input' id='test"+rows+"'></td>"
            +"<td>"
            +"<select name='subject_id_"+rows+"'>" +
            "<option value=''>请选择</option>" +
            "<c:forEach var='parentNode' items='${subject}'>" +
            "<c:if test='${parentNode.parent_id == 0}'>" +
            "<optgroup label='${parentNode.subject_name}'>" +
            "<c:forEach var='childNode' items='${subject}'>" +
            "<c:if test='${childNode.parent_id == parentNode.subject_id}'>" +
            "<option value='${childNode.subject_id}'>${childNode.subject_name}</option>" +
            "</c:if>" +
            "</c:forEach>" +
            "</optgroup>" +
            "</c:if>" +
            "</c:forEach>" +
            "</select>"
            +"</td>"
            +"<td><input name='burse_reason_"+rows+"' autocomplete='off' class='layui-input'></td>"
            +"<td><input name='burse_invoices_"+rows+"' autocomplete='off' class='layui-input'></td>"
            +"<td><input name='burse_money_"+rows+"' autocomplete='off' class='layui-input'></td>"
            +"</tr>");
        layui.laydate.render({
            elem: '#test'+rows ,//指定元素
            value: new Date(),//初始值
            type: 'datetime'
        });
        layui.form.render();
    }

    /**
     * 删除选中的行
     */
    function removeSeleced(){

        //总行数
        var len = $("#tb").find("tr").length - 1;
        //checkbox标签
        var chks = document.getElementsByClassName("chk");

        var needRemoveRows = [];
        //从第一行开始遍历，记录需要被删除的行
        for(i = 1; i <= len; i++){
            //如果被选中，则删除这一行
            if(chks[i-1].checked){

                needRemoveRows.push(chks[i-1].value);
            }
        }
        //删除需要被删除的行数
        len = needRemoveRows.length;
        for(i = 0; i <= len; i++){

            $("#row"+needRemoveRows[i]).remove();
        }
    }

    function openUser() {

        layer.open({
            title:'证明人',
            type: 2,//弹出一个iframe层
            content: '/jsp/processManage/userListPanel.jsp?dept_id='+$("#dept_id").val()+'&dept_name='+$("#dept_name").val(),
            area: ['900px', '500px'],
            btn: ['确定', '取消'],
            yes:function (index, layero) {
                //弹出层body的jQuery对象
                var body = layer.getChildFrame("body",index);
                //选中的员工id、name
                var user_id = body.find("#selectedUserId").val();
                var real_name = body.find("#selectedUserName").val();

                $("#prove_user_id").val(user_id);
                $("#prove_user_name").val(real_name);

                layer.close(index);
            }
        });
    }
</script>
</html>
